<template>
	<div class="dicm">
		<div class="table" v-show="parentDetailData.isTabelShow">
			<div class="container">
				<div class="handle-box">
					<div class="handle-box" style="float: left">
						<el-select v-model="searchcondition.dictCategoryId" placeholder="选择类别" class="handle-select mr10" @change="changeType">
							<el-option v-for="item in dicTypes" :key="item.id" :label="item.dictCategoryDesc" :value="item.id"></el-option>
						</el-select>
					</div>
					<div style="float: right">
						<el-button type="primary" v-if="isEditable==true" @click="handleDetail(null,null)" icon="add">添加</el-button>
					</div>
				</div>
				<el-table stripe :data="tableData" border style="width: 100%" ref="multipleTable" v-loading="loading">
					<el-table-column prop="dictKey" label="编码" width="150"></el-table-column>
					<el-table-column label="内容">
						<template slot-scope="scope">
							<div v-html="scope.row.dictValue"></div>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
					<el-table-column prop="seqNo" label="排序" width="100"></el-table-column>
					<el-table-column label="操作" width="150" v-if="isEditable==true">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="handleDetail(scope.$index, scope.row)">编辑</el-button>
							<el-button size="small" type="danger" v-if="isEditable==true" @click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="100" v-else>
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="handleDetail(scope.$index, scope.row)">编辑</el-button>							
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="searchcondition.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<detail ref="detail" :id="id" :isAddable="hasMulti" :dictCategoryId="searchcondition.dictCategoryId" :dicTypes="dicTypes" :parentDetailData="parentDetailData" v-on:close="handleClose"></detail>
	</div>
</template>

<script>
	import detail from './detail'
	import service from '../../../../js/common/dicservice.js';

	export default {
		components: {
			detail
		},
		data() {
			return {
				tableData: [],
				searchcondition: {
					pageNum: 1,
					pageSize: 10,
					dictCategoryId: ""
				},
				parentDetailData: {
					isTabelShow: true
				},
				id: 0,
				total: 0,
				title: '新增',
				loading: true,
				dicTypes: [], //{type:1,value:'职业'},
				isEditable: false, //是否需要维护，编辑不受控制
				hasMulti: true, //有多条记录，添加
				haspost: false
			}
		},
		created() {
			let self = this;
			setTimeout(function() {
				if(!self.haspost) {
					let parantid = self.$route.query.parentid;
					self.getDicType(parantid);
				}
			}, 100);
		},
		computed: {
			data() {
				return this.tableData;
			}
		},
		watch: {
			'$route' (to, from) {
				let parantid = to.query.parentid;
				this.haspost = true;
				this.getDicType(parantid);
			}
		},
		methods: {
			getData() {
				service.getPageData(this);
			},
			handleCurrentChange(val) { //翻页
				this.searchcondition.pageNum = val;
				service.getPageData(this);
			},
			handleSizeChange(val) { //每页数量
				this.searchcondition.pageSize = val;
				service.getPageData(this);
			},
			handleDetail(index, row) {
				service.showDetail(this, row);
			},
			handleClose(isRefreashList) {
				if(isRefreashList) {
					this.getData();
				}
			},
			handleDelete(row) {
				service.handleDelete(this, row.id);
			},
			changeType() {
				this.getDicTypeDetail();
				this.searchcondition.pageNum = 1;
				service.getPageData(this);
			},
			getDicType(parentId) {
				let self = this;
				service.getDicTypes(self, parentId, res => {
					self.dicTypes = self.formattool.trimNull(res.data.list, []);
					if(self.dicTypes.length > 0) {
						self.searchcondition.dictCategoryId = self.dicTypes[0].id;
						self.getDicTypeDetail();
						service.getPageData(self);
					}
				});
			},
			getDicTypeDetail() {
				var self = this;
				var param = {};
				param.id = self.searchcondition.dictCategoryId;
				self.httptool.ajaxPost('dictcategory/get', param, res => {
					let datas = res.data;
					self.isEditable = datas.needMaintain;
					self.hasMulti = datas.hasMulti;
				});
			}

		}
	}
</script>
<style src="./currentpage.less" lang="less"></style>